<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>用户信息检索</title>
	<link type="text/css" href="css/datatable/page.css" rel="stylesheet" />
	<link type="text/css" href="css/datatable/table.css" rel="stylesheet" />
	<script type="text/javascript" src="js/jquery/datatable/jquery.dataTables.js"></script>
	<script type="text/javascript" src="js/formjson.js"></script>
	<script type="text/javascript" src="js/common/util.js"></script>
	<script type="text/javascript"> 
		var oTable = null;
		
		$(function() {
			$("#userInfo").hide();
		} );

		//“检索”按钮的处理函数
		function search() {
			if (oTable == null) { //仅第一次检索时初始化Datatable
				$("#userInfo").show();
				oTable = $('#userInfo').dataTable( {
					"bAutoWidth": false,					//不自动计算列宽度
					"aoColumns": [							//设定各列宽度
									{"sTitle": "账号","sWidth": "50px"},
									{"sTitle": "用户名","sWidth": "100px"},
									{"sTitle": "拼音","sWidth": "80px"},
									{
										"sTitle": "性别",
										"sWidth": "60px",										
										"bSortable": false,
                						"fnRender": function(obj) {
                    						 var sReturn = obj.aData[ obj.iDataColumn ];
                    						sReturn=getDropValue("GENDER",sReturn);;
                    						return sReturn;
               					 		}
               						 },
									
									{"sTitle": "邮箱","sWidth": "140px"},
									{"sTitle": "电话","sWidth": "100px"},
									{"sTitle": "籍贯","sWidth": "70px"},
									{
										"sTitle": "是否接收邮件",
										"sWidth": "160px",
										"bSortable": false,
                							"fnRender": function(obj) {
                    						 	var sReturn = obj.aData[ obj.iDataColumn ];
                    							sReturn=getDropValue("YES_NO",sReturn);;
                    							return sReturn;
               					 		}
               					 	},
									{"sTitle": "注册日期","sWidth": "80px"},
									{"sTitle": "备注","sWidth": "*"}
								
					],
					"bProcessing": true,					//加载数据时显示正在加载信息
					"bServerSide": true,					//指定从服务器端获取数据
					"bFilter": false,						//不使用过滤功能
					"bLengthChange": false,					//用户不可改变每页显示数量
					"iDisplayLength": 8,					//每页显示8条数据
					"sAjaxSource": "userInfo/search.do",//获取数据的url
					"fnServerData": retrieveData,			//获取数据的处理函数
					"sPaginationType": "full_numbers",		//翻页界面类型
					"oLanguage": {							//汉化
						"sLengthMenu": "每页显示 _MENU_ 条记录",
						"sZeroRecords": "没有检索到数据",
						"sInfo": "当前数据为从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录",
						"sInfoEmtpy": "没有数据",
						"sProcessing": "正在加载数据...",
						"oPaginate": {
							"sFirst": "首页",
							"sPrevious": "前页",
							"sNext": "后页",
							"sLast": "尾页"
						}
					}
				});
			}

			//刷新Datatable，会自动激发retrieveData
			oTable.fnDraw();
		}

		//自定义数据获取函数
		function retrieveData( sSource, aoData, fnCallback ) {
			aoData.push( { "name": "userName", "value": $("#userName").val() } );

			$.ajax( {
				"type": "POST", 
				"contentType": "application/json",
				"url": sSource, 
				"dataType": "json",
				"data": JSON.stringify(aoData), 
				"success": function(resp) {
					fnCallback(resp.returnObject);
				}
			});
		}
	</script> 
</head>

<body>
	<h2>信息检索</h2>
	<div id="searchCondition">
		名称：<input type="text" id="userName"/>
		<input type="button" value="检索" onclick="search();"/>
	</div>
	<table class="display" id="userInfo">
<!--		<thead>-->
<!--			<tr>-->
<!--				<th>ID</th>-->
<!--				<th>名称</th>-->
<!--				<th>地址</th>-->
<!--				<th>出生日期</th>-->
<!--				<th>户口</th>-->
<!--				<th>Email</th>-->
<!--				<th>URL</th>-->
<!--				<th>身高</th>-->
<!--				<th>Email</th>-->
<!--				<th>URL</th>-->
<!--				<th>身高</th>-->
<!--			</tr>-->
<!--		</thead>-->
<!--		<tbody>-->
<!--			<tr>-->
<!--				<td colspan="11"></td> -->
<!--			</tr>-->
<!--		</tbody>-->
<!--		<tfoot>-->
<!--			<tr>-->
<!--				<th>ID</th>-->
<!--				<th>名称</th>-->
<!--				<th>地址</th>-->
<!--				<th>出生日期</th>-->
<!--				<th>户口</th>-->
<!--				<th>Email</th>-->
<!--				<th>URL</th>-->
<!--				<th>身高</th>-->
<!--				<th>Email</th>-->
<!--				<th>URL</th>-->
<!--				<th>身高</th>-->
<!--			</tr>-->
<!--		</tfoot>-->
	</table>
</body>
</html>